import React from 'react';
import { Grid } from '@mui/material';
import Layout from './components/Layout';
import AbiInput from './components/AbiInput';
import ChainConfig from './components/ChainConfig';
import MethodList from './components/MethodList';
import MethodCaller from './components/MethodCaller';
import { AppProvider } from './contexts/AppContext';
import { EthersProvider } from './contexts/EthersContext';

const App: React.FC = () => {
    return (
        <AppProvider>
            <EthersProvider>
                <Layout>
                    <Grid container spacing={3}>
                        <Grid item xs={12}>
                            <ChainConfig />
                        </Grid>
                        <Grid item xs={12}>
                            <AbiInput />
                        </Grid>
                        <Grid item xs={12} md={4}>
                            <MethodList />
                        </Grid>
                        <Grid item xs={12} md={8}>
                            <MethodCaller />
                        </Grid>
                    </Grid>
                </Layout>
            </EthersProvider>
        </AppProvider>
    );
};

export default App;